<template>
    <h1>我是 book</h1>


    <h1>基于params</h1>
    <ul>
        <li v-for="(book,index) in booksList" :key="index">
            <p>
                {{book.id}}==>{{book.title}}==>{{book.author}}
                <router-link :to="'/book/' + book.id + '/' + book.title">图书明细</router-link>
            </p>
        </li>
    </ul>
2
    <h1>基于query</h1>
    <ul>
        <li v-for="(book,index) in booksList" :key="index">
            <p>
                {{book.id}}==>{{book.title}}==>{{book.author}}
                <router-link :to="'/book2?id=' + book.id + '&title=' + book.title">图书明细</router-link>
            </p>
        </li>
    </ul>

    <router-view></router-view>

</template>

<script>
import loadBooks from '@/service/books'

export default {
    name: "Book",
    data() {
        return {
            booksList: loadBooks()
        }
    }
}
</script>

<style scoped>

</style>